<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>保险超级课堂-热销产品管理--学习进度</title>
    <script src="../../js/commonJs.js"></script>
    <script src="../../js/commonCss.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .el-icon-error {
            color: red;
            cursor: pointer;
        }

        .ql-editor {
            height: 300px;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <header>
        <span class="title">{{titleText}}</span>
        <el-button size="small" @click="returnBack">返回</el-button>
    </header>
    <div class="table-wraper">
        <div class="search-wraper">
            <div class="search-header">
<!--                <span class="title">筛选查询</span>-->
<!--                <el-button size="small" @click="search">查询结果</el-button>-->
            </div>
            <div class="search-form">
                <el-form inline label-width="100px" size="small">
                    <el-form-item>
                        <el-select v-model="q.status" clearable placeholder="学习进度" style="width: 100%;" @change="changeType">
                            <el-option label="未开始" value="0"></el-option>
                            <el-option label="学习中" value="1"></el-option>
                            <el-option label="已完成" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="q.searchWord" type="text" placeholder="考生账号" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="entityList" stripe border style="width: 100%" @selection-change="changeFun">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="cvpId" label="序号"></el-table-column>
            <el-table-column prop="userMobile" label="账号"></el-table-column>
            <el-table-column prop="userName" label="姓名"></el-table-column>
            <el-table-column prop="must" label="应看时长"></el-table-column>
            <el-table-column prop="time" label="已看时长"></el-table-column>
            <el-table-column prop="cvpStatus" label="学习进度">
                <template slot-scope="scope">
                    <el-tag size="mini" type="text" v-if="scope.row.cvpStatus==0">未开始</el-tag>
                    <el-tag size="mini" type="text" v-if="scope.row.cvpStatus==1">学习中</el-tag>
                    <el-tag size="mini" type="text" v-if="scope.row.cvpStatus==2">已完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="provinceBankName" label="省行"></el-table-column>
            <el-table-column prop="cityBankName" label="市行"></el-table-column>
            <el-table-column prop="subBank" label="支行"></el-table-column>
            <el-table-column prop="location" label="网点"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-button type="success" size="mini" icon="el-icon-download" style="margin-top: 10px"
                   @click="downloadExcel">批量导出
        </el-button>
        <el-button type="success" size="mini" icon="el-icon-download" style="margin-top: 10px"
                   @click="downloadExcelAll">全部导出
        </el-button>
        <div class="table-footer" style="text-align: center;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                //列表url
                listUrl: 'irClassVideoProgress/getProgressList',
                //导出url
                excelExportUrl: 'irClassVideoProgress/downloadExcel',
                excelExportUrlAll: 'irClassVideoProgress/downloadExcelAll',
                q: {
                    searchWord: '',
                    status: "",
                    videoId:""
                },
                entityList: [],
                currentPage: 1,
                pageSize: 10,
                total: 1000,
                changeArr: [],
            }
        },
        methods: {
            downloadExcel(){
                var ids = [];
                $.each(vm.changeArr, function (k, v) {
                    ids.push(v.cvpId);
                })
                if (ids.length == 0) {
                    vm.vAlert('请选择导出的学习进度', '错误')
                    return false;
                }
                var url = baseURL + vm.excelExportUrl + '?token=' + token + "&cvpIdList=" + ids;
                window.top.location.href = url;
            },
            downloadExcelAll(){
                var url = baseURL + vm.excelExportUrlAll + '?token=' + token + "&cvId="+this.q.videoId;
                window.top.location.href = url;
            },
            changeType(val) {
                if (val) {
                    this.$set(this.q, this.q.status, val.value)
                }
                this.getEntityList()
            },
            returnBack() {
                window.location.href  = "10-indexMessage.html";
            },
            search() {
                vm.currentPage = 1
                vm.getEntityList()
            },
            //获取传过来的参数
            getParams() {
                this.q.videoId= T.p("videoId");
                console.log("+++++")
                console.log(this.q.videoId);
                console.log("+++++")
                this.getEntityList();
            }
        },
        computed: {
            titleText: function () {
                return '学习进度管理'
            }
        },
        created() {
            this.getParams();
        }
    })
</script>
</html>
